<script setup>
import { defineProps } from 'vue';
import dayjs from 'dayjs';
const props = defineProps({
    userInfo: Object,
})
function getInfo(info) {
    if (Object.keys(props.userInfo).length === 0)
        return '';
    if (info === 'name')
        return props.userInfo.myInfo.nickname;
    if (info === 'studentId')
        return props.userInfo.myInfo.studentId
    if (info === 'major')
        return props.userInfo.myInfo.major;
    if (info === 'class')
        return props.userInfo.myInfo.class;
    if (info === 'seat_id')
        return props.userInfo.reservation.seat_id;
    if (info === 'reservation_date')
        return dayjs(props.userInfo.reservation.reservation_date).format('YYYY年MM月DD日 HH:mm');
    if (info === 'reservation_time')
        return props.userInfo.reservation.reservation_time;
    return '';
}

</script>
<template>
    <div class="reservation-info">
        <div class="reservation-info-title">
            <h2>预约信息</h2>
        </div>
        <div class="reservation-info-content">
            <p>姓名:{{ getInfo('name') }}</p>
            <p>学号：{{ getInfo('studentId') }}</p>
            <p>专业：{{ getInfo('major') }}</p>
            <p>班级：{{ getInfo('class') }}</p>
            <p>座位号：{{ getInfo('seat_id') }}</p>
            <p>预约时间：{{ getInfo('reservation_date') }}</p>
            <p>预约时长：{{ getInfo('reservation_time') }}</p>
        </div>
    </div>
</template>

<style scoped>
.reservation-info {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.reservation-info-title {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
</style>